<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Metro 4 implements several useful functions that are accessible through the special object.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Functions - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Functions</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Functions</h1>
                <p class="text-leader">
                    Metro 4 implements several useful functions that are accessible through the special object.
                </p>

                <!-- ads-html -->

                <h3>About</h3>
                <p>
                    All special utilities functions stored in <code>Metro.utils</code> or <code>Metro.Utils</code> object.
                </p>

                <script>
                    var tableData = [
                        ['isUrl(v)', 'Checks if value is url'],
                        ['isTag(v)', 'Checks if value is tag'],
                        ['isColor(v)', 'Checks if value is color (#fff, #ffffff)'],
                        ['isEmbedObject(v)', 'Checks if value is embed object, value to check - html string'],
                        ['isVideoUrl(v)', 'Checks if value is youtube or vimeo video link'],
                        ['isDate(v, f)', 'Checks if value is valid date string. You can set format in second argument'],
                        ['isInt(v)', 'Checks if value is integer'],
                        ['isFloat(v)', 'Checks if value is float'],
                        ['isTouchDevice()', 'Checks if device is touchable'],
                        ['isFunc(v)', 'Checks if value is a function or callable/executable'],
                        ['isObject(v)', 'Checks if value is a object'],
                        ['isArray(v)', 'Checks if value is a array'],
                        ['isType(v, t)', 'Checks if value is a specified type'],
                        ['isMetroObject(el)', 'Checks if value is a Metro component'],
                        ['isJQuery(el)', 'Checks if value is a jQuery object'],
                        ['isM4Q(el)', 'Checks if value is a M4Q object'],
                        ['isQ(el)', 'Checks if value is a M4Q or JQuery object'],

                        ['embedObject(el)', 'Insert element into embed container. Return html string'],
                        ['embedUrl(el)', 'Insert youtube link into embed container. Return html string'],
                        ['secondsToTime(seconds)', 'Return object {hours, minutes, seconds}'],
                        ['hex2rgba(hex, alpha)', 'Return string \'rgba(x, x, x, a)\''],
                        ['elementId(prefix)', 'Return string. Based on datetime and with specified prefix'],
                    ];

                    var drawCell = function(td, val, index){
                        if (index === 0) {
                            td.html("<code>"+val+"</code>");
                        }
                    }
                </script>
                <table class="table cell-border table-border options-table mt-4" data-role="table" data-static="true" data-body="tableData" data-on-draw-cell="drawCell">
                    <thead>
                    <tr>
                        <th>Function</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>secondsToFormattedString(seconds)</code></td>
                        <td>Return string "hh:mm:ss"</td>
                    </tr>
                    <tr>
                        <td><code>exec(f, args, context)</code></td>
                        <td>Exec function or code with arguments and context</td>
                    </tr>
                    <tr>
                        <td><code>isOutsider(el)</code></td>
                        <td>Check element to outside of the view</td>
                    </tr>
                    <tr>
                        <td><code>inViewport(el)</code></td>
                        <td>Check element in viewport</td>
                    </tr>
                    <tr>
                        <td><code>objectLength(el)</code></td>
                        <td>Return object length.</td>
                    </tr>
                    <tr>
                        <td><code>percent(a, b, r)</code></td>
                        <td>Return percent value for b from a. If r is true, returned value is integer else - real</td>
                    </tr>
                    <tr>
                        <td><code>objectShift(obj)</code></td>
                        <td>Return shifted object. Remove element with first key</td>
                    </tr>
                    <tr>
                        <td><code>objectDelete(obj, key)</code></td>
                        <td>Delete key from object and return it</td>
                    </tr>
                    <tr>
                        <td><code>objectClone(obj)</code></td>
                        <td>Copy object to clone and return it</td>
                    </tr>
                    <tr>
                        <td><code>arrayDelete(arr, val)</code></td>
                        <td>Delete from array by value and return it</td>
                    </tr>
                    <tr>
                        <td><code>arrayDeleteByKey(arr, key)</code></td>
                        <td>Delete key from array and return it</td>
                    </tr>
                    <tr>
                        <td><code>arrayDeleteByMultipleKeys(arr, keys_array)</code></td>
                        <td>Delete key from array and return new array</td>
                    </tr>
                    <tr>
                        <td><code>nvl(data, other)</code></td>
                        <td>Check data for null value and return other if null</td>
                    </tr>
                    <tr>
                        <td><code>github(repo, callback)</code></td>
                        <td>Get information from github and put then in callback</td>
                    </tr>
                    <tr>
                        <td><code>detectIE()</code></td>
                        <td>Detect if browser is Internet explorer or Edge</td>
                    </tr>
                    <tr>
                        <td><code>detectChrome()</code></td>
                        <td>Detect if browser is Chrome</td>
                    </tr>
                    <tr>
                        <td><code>md5(str)</code></td>
                        <td>Encode string with md5 algorithm</td>
                    </tr>
                    <tr>
                        <td><code>encodeUri(str)</code></td>
                        <td>Fix to base eencodeUri function</td>
                    </tr>
                    <tr>
                        <td><code>pageHeight()</code></td>
                        <td>Return real page height</td>
                    </tr>
                    <tr>
                        <td><code>cleanPreCode(selector)</code></td>
                        <td>Remove white spaces from code</td>
                    </tr>
                    <tr>
                        <td><code>coords(el)</code></td>
                        <td>Return element coordinates as object {top, left}</td>
                    </tr>
                    <tr>
                        <td><code>positionXY(event, type)</code></td>
                        <td>Return position for type: screen, page, client</td>
                    </tr>
                    <tr>
                        <td><code>clientXY(event)</code></td>
                        <td>Return position</td>
                    </tr>
                    <tr>
                        <td><code>pageXY(event)</code></td>
                        <td>Return position</td>
                    </tr>
                    <tr>
                        <td><code>screenXY(event)</code></td>
                        <td>Return position</td>
                    </tr>
                    <tr>
                        <td><code>isRightMouse(event)</code></td>
                        <td>Check if user click on right mouse button</td>
                    </tr>
                    <tr>
                        <td><code>hiddenElementSize(el, includeMargin)</code></td>
                        <td>Return element size as object {width, height}</td>
                    </tr>
                    <tr>
                        <td><code>getStyle(el, pseudo)</code></td>
                        <td>Return element calculated styles</td>
                    </tr>
                    <tr>
                        <td><code>getStyleOne(el, property)</code></td>
                        <td>Return element calculated styles for specified property</td>
                    </tr>
                    <tr>
                        <td><code>getTransformMatrix(el)</code></td>
                        <td>Return element transform matrix</td>
                    </tr>
                    <tr>
                        <td><code>computedRgbToHex(rgb)</code></td>
                        <td>Return hex value for computed element color.</td>
                    </tr>
                    <tr>
                        <td><code>computedRgbToHex(rgb)</code></td>
                        <td>Return hex value for rgb string 'rgb(x, x, x)' => #xxxxxx</td>
                    </tr>
                    <tr>
                        <td><code>computedRgbToRgba(rgb, alpha)</code></td>
                        <td>Return rgba string for rgb string 'rgb(x, x, x)' => 'rgba(x, x, x, a)'</td>
                    </tr>
                    <tr>
                        <td><code>computedRgbToArray(rgb)</code></td>
                        <td>Return array for string 'rgb(x, x, x)' => [x, x, x]</td>
                    </tr>
                    <tr>
                        <td><code>hexColorToArray(c)</code></td>
                        <td>Convert hex color value to array</td>
                    </tr>
                    <tr>
                        <td><code>hexColorToRgbA(c, a)</code></td>
                        <td>Convert hex color value rgba string: '#xxxxxx' => 'rgba(x, x, x, a)'</td>
                    </tr>
                    <tr>
                        <td><code>getInlineStyles(el)</code></td>
                        <td>Return element inline styles as array</td>
                    </tr>
                    <tr>
                        <td><code>updateURIParameter(uri, key, val)</code></td>
                        <td>Update parameter in Uri</td>
                    </tr>
                    <tr>
                        <td><code>getURIParameter(uri, key)</code></td>
                        <td>get parameter from Uri</td>
                    </tr>
                    <tr>
                        <td><code>getLocales()</code></td>
                        <td>Get registered metro locales</td>
                    </tr>
                    <tr>
                        <td><code>addLocale(data)</code></td>
                        <td>Register metro locale in runtime</td>
                    </tr>
                    <tr>
                        <td><code>aspectRatioH(width, ratio)</code></td>
                        <td>Return height for specific ratio</td>
                    </tr>
                    <tr>
                        <td><code>aspectRatioW(height, ratio)</code></td>
                        <td>Return width for specific ratio</td>
                    </tr>
                    <tr>
                        <td><code>valueInObject(obj, value)</code></td>
                        <td>Check if value exist in object</td>
                    </tr>
                    <tr>
                        <td><code>keyInObject(obj, key)</code></td>
                        <td>Check if key exist in object</td>
                    </tr>
                    <tr>
                        <td><code>newCssSheet(media)</code></td>
                        <td>Create css sheet object</td>
                    </tr>
                    <tr>
                        <td><code>addCssRule(sheet, selector, rules, index)</code></td>
                        <td>Add rule to css sheet object</td>
                    </tr>
                    <tr>
                        <td><code>media(query)</code></td>
                        <td>Check media query</td>
                    </tr>
                    <tr>
                        <td><code>mediaModes()</code></td>
                        <td>Get current media points</td>
                    </tr>
                    <tr>
                        <td><code>mediaExist(m)</code></td>
                        <td>Return true if point exist in current medias</td>
                    </tr>
                    <tr>
                        <td><code>inMedia(m)</code></td>
                        <td>Check if point is current media</td>
                    </tr>
                    <tr>
                        <td><code>isValue(val)</code></td>
                        <td>Return true if val not in [undefined, null, ""]</td>
                    </tr>
                    <tr>
                        <td><code>isNegative(val)</code></td>
                        <td>Return true if val less then 0</td>
                    </tr>
                    <tr>
                        <td><code>isPositive(val)</code></td>
                        <td>Return true if val more then 0</td>
                    </tr>
                    <tr>
                        <td><code>isZero(val)</code></td>
                        <td>Return true if val is 0 (int or float)</td>
                    </tr>
                    <tr>
                        <td><code>between(val, bottom, top, equals)</code></td>
                        <td>Return true if val between bottom and top</td>
                    </tr>
                    <tr>
                        <td><code>parseMoney(val)</code></td>
                        <td>Return numeric value from any money format. Ex: $5,640.63 -> 5640.63</td>
                    </tr>
                    <tr>
                        <td><code>func(string)</code></td>
                        <td>Return function object</td>
                    </tr>
                    <tr>
                        <td><code>nearest(val, precision, down)</code></td>
                        <td>search for the nearest integer, a multiple of required. Ex: Metro.utils.nearest(37, 5, false) -> 40, Metro.utils.nearest(37, 5, true) -> 35</td>
                    </tr>
                    <tr>
                        <td><code>copy(el)</code></td>
                        <td>Copy element to clipboard</td>
                    </tr>
                    <tr>
                        <td><code>isLocalhost()</code></td>
                        <td>Check if current location is localhost</td>
                    </tr>
                    <tr>
                        <td><code>getCursorPosition(element, event)</code></td>
                        <td>Return mouse or pointer position as x, y</td>
                    </tr>
                    <tr>
                        <td><code>getCursorPositionX(element, event)</code></td>
                        <td>Return mouse or pointer position x</td>
                    </tr>
                    <tr>
                        <td><code>getCursorPositionY(element, event)</code></td>
                        <td>Return mouse or pointer position y</td>
                    </tr>
                    </tbody>
                </table>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>